body {
    /* background: #f2f2f2; */
    background: #282c34;
}

.frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    margin-top: -200px;
    margin-left: -200px;
    border-radius: 2px;
    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    background: #333;
    color: #fff;
    font-family: 'Open Sans', Helvetica, sans-serif;
}

.boxes {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    height: 100%;

    .box {
        position: relative;
        flex: 1 1 auto;
        width: 20%;
        background: grey;
        transition: all 0.5s ease-in-out;
        cursor: pointer;
        overflow: hidden;

        .text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0.5);
            font-weight: 700;
            font-size: 30px;
            text-transform: uppercase;
            color: transparent;
            transition: all 0.5s ease-in-out;
        }

        &.dark {
            background: #34495e;
        }
        &.orange {
            background: #e67e22;
        }

        &:hover {
            width: 100%;

            .text {
                color: #fff;
                transform: translate(-50%, -50%) scale(1);
            }
        }
    }
}
